<template>
  <div class="main">
    <MainTopMenuPanel :activePanel="activePanel" ></MainTopMenuPanel>
    <!-- 地图   -->
    <Mapframe ref="mapframe"
              :showMenuTools="showMenuTools"
              @mapInfoEvent="getMapInfo"
              @locateEvent="getLocate"
              @popupBtnClick="popupBtnClick"
              :device-data="devDatas1"></Mapframe>

    <!-- 底部视频播放    -->
    <div ref="foot-div" class="foot-div" :style="footBoxStyle">
      <div class="bottom-player"  :class="footActive === true ? 'hight180' : 'hight0'">
        <div class="foot-play-frame">
          <div class="box_site5">
            <div v-for="item in playerPanels" class="div_site5" :ref="item.ref"  :style="item.style"
                 @click="playerBoxClick(item.id)" @mouseover="boxMouseOver(item.id)" @mouseleave="boxMouseLeave(item.id)">
              <CommPlayer :ref="item.playerRef" :scale="scale" :customStyle="playerBgStyle"></CommPlayer>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮   -->
    <div class="foot-btn-div">
      <div class="foot-button" :class="footActive === true ? 'bottom180' : 'bottom0'" @click="footBtnClick">
        <i ><Icon type="ios-arrow-up" /></i>
      </div>
    </div>

    <!--  右边抽屉  -->
    <div ref="rightDiv" class="right-div" :style="rightBoxStyle">
      <!--      <div class="right_drawer" :class="rightActive === true ? 'width453' : 'width0'">-->
      <div class="right_drawer" >
        <!--        <Poptip title="气泡" trigger="hover" placement="right">
                  <span> 气泡 </span>
                <template #content>
                    <div class="api">
                        <table>
                            <thead>
                                <tr>
                                    <th>Version</th>
                                    <th>Update Time</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>0.9.5</td>
                                    <td>2016-10-26</td>
                                    <td>components</td>
                                </tr>
                                <tr>
                                    <td>0.9.4</td>
                                    <td>2016-10-25</td>
                                    <td>Add new components</td>
                                </tr>
                                <tr>
                                    <td>0.9.2</td>
                                    <td>2016-09-28</td>
                                    <td>Add new components</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </template>

                </Poptip>-->
      </div>
      <div class="rightbox">
        <div class="button" @click="rightBoxbtnClick">
          <i class="iconfont iconshouqi1"><Icon type="ios-arrow-forward" /></i>
        </div>
      </div>
    </div>

    <!-- 右下文字提示   -->
    <div class="word-tag-div" >
      <div class="sth" :style="tagBoxStyle">
        <div style="margin-bottom: 5px;">
          当前位置：{{currentLocate}}
        </div>
        <div><span>{{currentMapInfo}}</span> </div>
      </div>
    </div>
    <!--  左边抽屉  -->
    <div class="left-div" :style="leftBoxStyle">
      <div class="drawer-box" :class="leftActive === true ? 'width300' : 'width300'">
        <GbDevicetree1 ref="gbDeviceTree1"
                       @device-refresh="deviceRefresh"
                       @chn-node-click="chnClick"
                       @org-node-click="orgClick"
                       @dev-node-click="devClick"
                       @on-offline-click="chnOfflineClick"
                       @on-playbtnclick="playBtnClick"
                       @on-select-change="selectChange"></GbDevicetree1>
      </div>

      <div class="left-box">
        <div class="button" @click="leftBtnClick">
          <i><Icon type="ios-arrow-forward" /></i>
        </div>
      </div>
    </div>

    <DeviceInfo ref="deviceInfo"></DeviceInfo>
    <VideoCallDialog ref="videoCallDialog"></VideoCallDialog>

  </div>
</template>
<script>
import Mapframe from "@/view/Home/map/Mapframe";
import MainTopMenuPanel from "@/view/Home/component/MainTopMenuPanel";
import MainFooterMenu from "@/view/Home/component/MainFooterMenu";
import Device from '@/api/Device';
import DrawerFootButton from "@/view/Home/component/DrawerFootButton";
import DrawerLeftButton from "@/view/Home/component/DrawerLeftButton";
import DrawerFoot from "@/view/Home/component/DrawerFoot";
import MapInfo from "@/view/Home/map/maptools/data/MapInfo";
import CommPlayer from "@/view/Home/component/CommPlayer";
import GbDevicetree1 from "_c/topnav/GbDeviceTree1";
import DeviceInfo from "@/view/Home/utils/DeviceInfoDialog";
import VideoCallDialog from "@/view/Home/utils/VideoCallDialog";
import {apiResult} from "@/libs/util";

export  default {
  components: {Mapframe,MainTopMenuPanel,MainFooterMenu,DrawerFootButton,DrawerLeftButton,DrawerFoot,GbDevicetree1,CommPlayer,DeviceInfo,VideoCallDialog},
  computed:{
    drawerFootDisplay(){
      return this.drawerFoot.display;
    },
    drawerFootBtnDisplay(){
      return this.drawerFoot.display;
    },
  },
  watch:{
    footActive(oldValue,newValue){
      this.footRightBoxCloseOrOpen();
    },
    rightActive(){
      this.footRightBoxCloseOrOpen();
    }
  },
  data(){
    return{
      showMenuTools:true,//地图是否显示菜单栏
      playerActive: 'border:1px solid #F00', //播放器选中时的边框
      playerUnActive: 'border:1px solid #14edc5', //播放器没选中时的边框
      currentPlayerBoxNum: -1,//当前选中播放器的序号

      playerBgStyle:{ //播放器背景颜色
        backgroundColor: 'rgb(175,175,176)'
      },
      scale:false,
      activePanel:1,
      leftBoxStyle:{bottom: '0px',left:"0px"},
      footBoxStyle:{
        left:"300px",
        bottom:"0px"
      },
      leftActive:false,

      rightBoxStyle:{bottom: '180px',right:'-400px'},
      tagBoxStyle:{right:'0px',bottom: '180px'},

      rightActive:false,
      footActive:true,

      drawerHeight:'60%',
      drawerWidth:'300px',

      api: new Device(),
      devDatas:[],
      devDatas1:null,
      mapInfo:null,

      currentMapInfo:"《ArcGis 影像》，级别：11",
      currentLocate:"112.34353, 22.343553",
      /*      mapInfo: {
              centerLongitude:114.236262,
              centerLatitude:22.677236,
              minZoom:2,
              maxZoom:20,
              defaultZomm:5,
              mode: 'ONLINE'
            },*/
      drawerFoot:{
        drawerHeight:'180px',
        drawerWidth:'600px',
        drawerRight:'0',
        inner:false,
        display: false,
        mask: true,
      },
      playerPanels:[ //播放面板
        {id:0,ref:'playerBox1',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer1",active:false},
        {id:1,ref:'playerBox2',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer2",active:false},
        {id:2,ref:'playerBox3',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer3",active:false},
        {id:3,ref:'playerBox4',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer4",active:false},
        {id:4,ref:'playerBox5',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer5",active:false},
      ],
      playerScale:false
    }
  },
  methods:{
    /**
     * 地图改变后
     */
    getMapInfo(event){
      this.currentMapInfo=event;
    },
    /**
     * 取当前定位信息
     */
    getLocate(event){
      this.currentLocate=event;
    },

    /**
     * 当底部栏和右边栏关闭或打开时
     */
    footRightBoxCloseOrOpen(){
      if (this.rightActive){
        this.rightBoxStyle.right = '0px';
        this.tagBoxStyle.right="400px";
      }else{
        this.rightBoxStyle.right = '-400px';
        this.tagBoxStyle.right="0px";
      }

      if (this.footActive == false ){
        this.tagBoxStyle.bottom="0px";
        this.rightBoxStyle.bottom='0px';
      }else {
        this.tagBoxStyle.bottom = "180px";
        this.rightBoxStyle.bottom='180px';
      }
    },
    rightBoxbtnClick(e){
      this.rightActive=!this.rightActive;
      /*if (this.rightActive){
        this.tagBoxStyle.right="500px";
      }else{
        this.tagBoxStyle.right="50px";
      }*/
    },
    footBtnClick(){
      this.footActive = !this.footActive;
      if (this.footActive){
        this.rightBoxStyle.bottom='180px';
        this.tagBoxStyle.bottom='180px';
        //this.leftBoxStyle.bottom='180px';

      }else {
        this.rightBoxStyle.bottom='0';
        this.tagBoxStyle.bottom='10px';
        //this.leftBoxStyle.bottom='0';

      }
    },

    playerPanelClick(id){

    },
    playerPanelMouseOver(id){

    },
    playerPanelMouseLeave(id){

    },

    drawerFootBtnClick(show){
      console.log("show: %o",show);
      /** 底部抽屉按钮点击 */
      this.drawerFoot.display = show;
      if (show){
        this.rightBoxStyle.bottom='180px';
        this.tagBoxStyle.bottom='180px';
        //this.leftBoxStyle.bottom='180px';
      }else {
        this.rightBoxStyle.bottom='0';
        this.tagBoxStyle.bottom='10px';
        //this.leftBoxStyle.bottom='0';
      }

    },

    leftBtnClick(){
      this.leftActive = !this.leftActive;
      this.mapToolLeft = this.leftActive==true?"300px":"0px";
      this.leftBoxStyle.left = this.leftActive==true?"0px":"-300px";
      if (this.leftActive){
        this.footBoxStyle.left="300px";
      }else{
        this.footBoxStyle.left="0px";
      }
    },


    getAll4GDeves(){
      let that = this;
      that.devDatas=[];
      this.$nextTick(() => {
        this.api.queryListWhere(JSON.stringify({type:2})).then(res => {
          apiResult(res.data,false,result=>{
            that.devDatas = result.data;
            for(let i in that.devDatas){
              if (!that.devDatas[i].lng){
                that.devDatas[i].lng = that.mapInfo.centerLongitude;
                that.devDatas[i].lat=that.mapInfo.centerLatitude;
              }
            }
          })
        })

      })
    },

    orgClick(node, data){
      console.log("orgClick-node:%o",node);
      console.log("orgClick-data:%o",data);
    },
    devClick(node, data){

    },


    /**
     *  播放实时视频
     * @param node
     * @param data
     */
    playStart(node, data){
      if (!this.footActive){
        this.footActive = true;
      }
      const that = this;
      //在线设备
      const deviceId=data.arrt.deviceCode;
      const channelId=data.arrt.channelCode;
      console.log("通知设备推流：" + deviceId + " : " + channelId);
      if (!(!!deviceId && !!channelId)){
        this.$Message.error("数据属性缺失，不能播放");
      }
      this.playerScale =true;

      /** 通知设备推流 */
      this.api.playStart(deviceId,channelId).then(res=>{
        //console.log(res);
          apiResult(res.data,false,result=>{
            if (this.currentPlayerBoxNum > -1) {
              this.$refs[this.playerPanels[this.currentPlayerBoxNum].playerRef][0].play(res.data.data.ws_flv,deviceId,channelId);
              return;
            }
            // 没选中则一直向后找，哪个格子有空就播放
            for(let i in this.playerPanels){
              if (!this.$refs[this.playerPanels[i].playerRef][0].isPlaying()){
                this.$refs[this.playerPanels[i].playerRef][0].play(res.data.data.ws_flv,deviceId,channelId)
                return;
              }
            }
          })

      })
    },
    chnOfflineClick(node, data){

    },
    playBtnClick(node, data){

    },
    selectChange(node, data){

    },
    /**
     * 当在设备树搜索和选择时
     * 设备数据刷新
     * @param data
     */
    deviceRefresh(data){
      //刷新汇聚数据
      this.devDatas1=[];

      this.recursiveDevices(data);

      this.$refs.mapframe.refreshCluser(40,20,this.devDatas1)
    },
    recursiveDevices(data,org){
      if (!org){
        org = {};
        org.orgName=null;
        org.devName=null;
        org.parent="org";//org/dev
      }
      //递归设备
      for(let i=0;i<data.length;i++) {
        if (data[i].type == 'org'){
          org.orgName = data[i].title;
          org.parent = "org";
          org.devName = "";
        }
        if (data[i].type == 'dev'){
          org.devName = data[i].title;
          org.parent = "dev";
        }
        if (data[i].type == 'chn') {
          const dev = data[i];
          if (!dev.longitude){
            dev.longitude=this.mapInfo.center[0] + Math.random() * 0.05;
            dev.latitude=this.mapInfo.center[1] + Math.random() * 0.05;
          }

          /*         let device={
                     id: dev.id,
                     title: dev.title,
                     longitude: !!dev.longitude?dev.longitude:this.mapInfo.center[0] + Math.random() * 0.05,
                     latitude: !!dev.latitude?dev.latitude:this.mapInfo.center[1] + Math.random() * 0.05,
                     deviceType: dev.deviceType, //普能执法仪，2、4G执法仪, 3、监控摄像头
                     online: dev.online, //1 在线，0离线

                     orgName:org.orgName,
                     devName:org.devName,
                     userName:"王警官",
                     userCode:"000002",
                     direction:"6°",
                     speed:25,
                     locate:"深圳市龙华区",
                     arrt: dev.arrt
                   };*/

          this.devDatas1.push(data[i]);
        }

        if (!!data[i].children) {
          this.recursiveDevices(data[i].children,org);
        }
      }
    },

    /**
     * 通道点击
     * @param event
     * @param node
     * @param data
     */
    chnClick(event,node, data){
      /**
       * event:
       * locate 定位
       * liveVideo 实时视频
       * liveAudio 监听
       * videoCall 视频通话
       * audioCall 语音通话
       * takePicture 拍照
       * issueMessage 消息下发
       * favorite 收藏
       * track 跟踪
       * nearby 附近
       * deviceInfo 设备信息
       */
      console.log("chnClick(event,node, data): ");
      console.log("event: %o ",event);
      console.log("node: %o ",node);
      console.log("data: %o ",data);

      if (event === 'locate'){
        //定位
        this.$refs.mapframe.findChnFecture(data);
      }else if (event === 'liveVideo'){
        //实时视频
        this.playStart(node,data);
      }else if(event === 'deviceInfo'){
        //设备信息
        this.showDeviceIfo(data);


      }else if(event === 'videoCall'){
        this.$refs.videoCallDialog.openDialog(data, null);
      }



    },
    /**
     * 播放器点击
     */
    playerBoxClick(number){
      for(let i in this.playerPanels){
        if (i == number){
          if (this.currentPlayerBoxNum==number){
            // 本来就选中的则取消
            this.playerPanels[i].active = false;
            this.playerPanels[i].style = this.playerUnActive;
            this.currentPlayerBoxNum = -1;

          }else{
            // 没选中的就选 中
            this.playerPanels[i].active = true;
            this.playerPanels[i].style = this.playerActive;
            this.currentPlayerBoxNum = number;
          }
        }else{
          // 其它box 恢复原状态
          this.playerPanels[i].active = false;
          this.playerPanels[i].style = this.playerUnActive;
        }
      }
    },
    /** BOX 移入 事件 */
    boxMouseOver(number) {
      if (!this.playerPanels[number].playerActive){
        this.playerPanels[number].style = this.playerActive;
      }
    },
    /** BOX 移出 事件 */
    boxMouseLeave(number) {
      if (this.currentPlayerBoxNum == number){
        return;
      }
      if (!this.playerPanels[number].playerActive){
        this.playerPanels[number].style = this.playerUnActive;
      }
    },

    popupBtnClick(event,node, data){
      /**
       * event:
       * locate 定位
       * liveVideo 实时视频
       * liveAudio 监听
       * videoCall 视频通话
       * audioCall 语音通话
       * takePicture 拍照
       * issueMessage 消息下发
       * favorite 收藏
       * track 跟踪
       * nearby 附近
       * deviceInfo 设备信息
       */
      if (event === 'liveVideo'){
        //实时视频
        this.playStart(node,data);
      }else if(event === 'deviceInfo'){
        //设备信息
        this.showDeviceIfo(data);
      }else if(event === 'videoCall'){
        //视频通话
        this.$refs.videoCallDialog.openDialog(data, null);

      }
    },
    //设备信息
    showDeviceIfo(data){
      console.log("showDeviceIfo: 有错误，会崩溃，暂停使用 " + data);

      //this.$refs.deviceInfo.openDialog(data, null);
    }
  },
  created() {
    ;
  },
  mounted() {
    /**
     * 设备默认的地图参数
     */
    //new MapInfo().set("Arcgis","ArcgisYX");
    new MapInfo().set("GaoDe","GaoDeSL");
    this.mapInfo = new MapInfo().get();
    //this.getAll4GDeves();
  }

}
</script>

<style lang="less">
//@import "../../my-theme/template";
.main{
  position:relative;
  width: 100%;
  height: 100%;
};
//底部播放框
/*
  .foot-play-frame{
    width:100%;
    height:100%;
    .box_site5 {
      width:100%;
      height:100%;
      background-color: #000;
      display: flex;
      flex-wrap: wrap;

            .div_main5 {
              width: calc(100% / 2);
              height: calc(100% / 2);
              border: 1px solid #14edc5;
              box-sizing: border-box;

            }
      .div_site5 {
        width: calc(100% / 5);
        height: 100%;//calc(100% / 2);
        border: 1px solid #14edc5;
        box-sizing: border-box;
      }
    }
  }
  */

/*右弹框*/
.right-div {
  top:70px;

  //height: 100%;
  bottom: 0;
  position: fixed;
  right: 0;
  z-index: 100;
  //background-color: #2d8cf0;

  .width453 {
    width: 453px;
  }
  .width0{
    width: 0px;
  }
  .right_drawer {
    width:400px;
    height: 100%;
    background: #f1f7ff;
    float: right;
    -webkit-transition: width .3s;
    transition: width .3s;
    border: 1px solid #14edc5;
    border-top-left-radius: 7px;
  }
  .rightbox{
    float: right;
    height: 100%;
    position: relative;
    top:100px;

    .button {
      width: 37px;
      height: 37px;
      background: #7cc3fd;
      -webkit-box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
      box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
      text-align: center;
      line-height: 35px;
      vertical-align: top;
      margin-top: 11px;
      border: 1px solid #e5e3dd;
      border-right: none;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      cursor: pointer;
      i{
        font-size: .2rem;
        color: #fff;
      }
    }
  }
}

/* 底固定栏 */
.word-tag-div{
  //bottom: 180px;
  .sth{
    background-color: rgba(0, 1, 17, 0.2);
    font-size: .12rem;
    color: rgb(240, 241, 245);
    text-align: right;
    -webkit-transition: right .3s;
    transition: right .3s;
    position: absolute;
    bottom: 10px;
    right: 50px;
    z-index: 98;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  /*right490 为何不能在 sth里定义 */
  /*    .right490{
        right: 500px;
      }
      .right50{
        right: 50px;
      }*/
}

/** 底固定栏 */
.foot-div{
  z-index: 91;
  position: absolute;
  right: 0px;
  .bottom-player{
    width: 100%;
    bottom: 0;
    //height: 180px;
    background-color: #ffffff;
    z-index: 99;

    .foot-play-frame{
      width:100%;
      height:100%;
      .box_site5 {
        width:100%;
        height:100%;
        background-color: #000;
        display: flex;
        flex-wrap: wrap;

        /*      .div_main5 {
                width: calc(100% / 2);
                height: calc(100% / 2);
                border: 1px solid #14edc5;
                box-sizing: border-box;

              }*/
        .div_site5 {
          width: calc(100% / 5);
          height: 100%;//calc(100% / 2);
          border: 1px solid #0c0c0c;
          box-sizing: border-box;
        }
      }
    }
  };
  .hight180{
    height: 180px;
  };
  .hight0{
    height: 0px;
  };

}
/** 底部按钮 */
.foot-btn-div {
  .foot-button {
    position: absolute;
    /*    height: 100%;
        position: relative;*/

    width: 60px;
    height: 24px;
    left:50%;
    //bottom:0;
    background: #7cc3fd;
    -webkit-box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
    box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
    text-align: center;
    line-height: 35px;
    vertical-align: top;
    margin-top: 11px;
    border: 1px solid #e5e3dd;
    border-bottom: none;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    i{
      font-size: .2rem;
      color: #fff;
    }
  };
  .bottom180{
    bottom:180px;
  }
  .bottom0{
    bottom:0;
  }
}


/*左抽屉 */
.left-div {
  top:100px;
  bottom:0;
  //height: 100%;
  position: fixed;
  left: 0;
  z-index: 90;

  //background-color: #2d8cf0;

  .width300 {
    width: 300px;
  }
  .width0{
    width: 0px;
  }
  .drawer-box {
    height: 100%;
    background: #f1f7ff;
    float: left;
    -webkit-transition: width .3s;
    transition: width .3s;
    border: 1px solid #14edc5;
    border-top-right-radius: 5px;
  }
  /* 按钮 */
  .left-box {
    float: left;
    height: 100%;
    position: relative;
    top: 100px;

    .button {
      width: 37px;
      height: 37px;
      background: #7cc3fd;
      -webkit-box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
      box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
      text-align: center;
      line-height: 35px;
      vertical-align: top;
      margin-top: 11px;
      border: 1px solid #e5e3dd;
      border-left: none;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      cursor: pointer;
      i{
        font-size: .2rem;
        color: #fff;
      }
    }
  }
}
</style>
